<include file="Public:header" />
<style>
table tbody tr{cursor:move;}
</style>
<div class="container">
	<div class="page-header">
		<h4>{:L('SMS_TPL_SETTING')}</h4>
	</div>
	<include file="Public:alert" />
	<div class="row">
		<form action="{:U('sms/delete')}" id="form1" method="post">
			<div class="span12">
				<p><div class="bulk-actions align-left">
					<a class="btn" href="javascript:void(0);" id="btn_delete"/><i class="icon-remove"></i> {:L('DELETE')}</a> &nbsp; <a class="btn" id="sort_btn"><i class="icon-file"></i> {:L('SAVE_ORDER')}</a>
					<div class="pull-right">
						<a href="javascript:void(0);" id="add" class="btn btn-primary"><i class="icon-plus"></i> {:L('ADD_SMS_TPL')}</a>
					</div>
				</div></p>
			</div>
			<div class="span12">
				<table class="table table-hover" width="95%" border="0" cellspacing="1" cellpadding="0">
					<notempty name="templateList">
						<thead>
							<tr>
								<th width="10%"><input type="checkbox" name="check_all" id="check_all" class="check_all"/> &nbsp;</th>
								<th width="20%">{:L('TPL_SUBJECT')}</th>
								<th width="50%">{:L('CONTENT')}</th>
								<th width="20%">{:L('OPERATING')}</th>
							</tr>
						</thead>
						<tfoot>
							<tr>
								<td colspan="6">
									<div class="span8"><span style="color: rgb(243, 40, 12);">{:L('SAVE_ORDER_TIPS')}</span></div>
								</td>
							</tr>
						</tfoot>
						<tbody>
							<volist name="templateList" id="vo">
								<tr>
									<td><input type="checkbox" class="list" name="template_id[]" value="{$vo.template_id}"/>
									</td>
									<td>{$vo.subject}</td>
									<td>{$vo.content}</td>
									<td><a href="javascript:void(0);" rel="{$vo['template_id']}" class="edit">{:L('EDIT')}</a></td>
								</tr>
							</volist>
						</tbody>
					<else />
						<tr>
							<td>{:L('EMPTY_TPL_DATA')}</td>
						</tr>
					</notempty>
				</table>
			</div> 
		</form>
	</div>
<div class="hide" id="dialog-add" title="{:L('ADD_STATUS')}">loading...</div>
<div class="hide" id="dialog-edit" title="{:L('EDIT_STATUS')}">loading...</div>
<div class="hide" id="dialog-delete" title="{:L('DELETE_STATUS')}">loading...</div>
</div>
<script type="text/javascript">	
$("#dialog-add").dialog({
	autoOpen: false,
	modal: true,
	width: 600,
	maxHeight: 400,
	position: ["center",100]
});
$("#dialog-edit").dialog({
	autoOpen: false,
	modal: true,
	width: 600,
	maxHeight: 400,
	position: ["center",100]
});

$("table tbody").sortable({connectWith: "table tbody"});

$(function(){
	$("#btn_delete").click(function(){
		if(confirm('{:L("DELETE_CONFIRM")}')){
			$('#form1').submit();
		}
	});
	$("#check_all").click(function(){
		$("input[class='list']").prop('checked', $(this).prop("checked"));
	});
	$("#add").click(function(){
		$('#dialog-add').dialog('open');
		$('#dialog-add').load('{:U("sms/add")}');
	});
	$(".edit").click(function(){
		var id = $(this).attr('rel');
		$('#dialog-edit').dialog('open');
		$('#dialog-edit').load('{:U("sms/edit","id")}'+id);
	});
	$("#sort_btn").click(
		function() {
			position = [];
			$.each($(".list"), function(i, item){position.push(item.value)});
			$.get('{:U("sms/ordersort")}',{postion:position.join(',')}, function(data){
				if (data.status == 1) {
					$(".page-header").after('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button>' + data.info + '</div>');
				} else {
					$(".page-header").after('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button>' + data.info + '</div>');
				}
			}, 'json');
		}	
	);
})
</script>
<include file="Public:footer" />